<template>
  <div class="coupon">  
      

    <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.name}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <div class="navbar_content">
      <div :hidden="activeIndex != 0">
        <!-- 选项一的内容 -->
        <div class="coupon_message">
          <div class="coupon_money">
            <span>￥10</span>
            <span>满10元可用</span>
          </div>
          <div class="coupon_activity">
            <p>元气森林满减活动</p>
            <p class="time">2020-09-01 2020-09-01 06:00:00至2020.09.30 23:59:59</p>
          </div>  
          <input type="button" value="去使用" @click="toUseCoupon()" />      
          </div>
      </div>
      <div :hidden="activeIndex != 1">选项二的内容</div>
      <div :hidden="activeIndex != 2">选项三的内容</div>
    </div>
      
  </div>
</template>

<script>

// 引入SDK核心类
// var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js'
// 实例化API核心类
const qqmapsdk = new QQMapWX({
	key: '55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT'
});
export default {
  data () {
    return {
      tabs: [
        {
          name: "未使用",
          type: "1",
          checked: true
        },
        {
          name: "已使用",
          type: "2",
          checked: true
        },
        {
          name: "已失效",
          type: "3",
          checked: true
        }
      ],
      activeIndex: 0,
      addressArr: [                 
        [113.953768, 22.53327,"粤美特大厦点位"],               
        [114.05959, 22.546513,"深圳书城点位点位"],      
        [114.097927, 22.549218,"红荔邮政点位"],          
        [113.952696, 22.530438,"科技生态园11栋A座点位"],    
        [113.952494, 22.529351,"科技生态园5栋C座点位"],       
        [113.952617, 22.530753,"科技生态园8栋A座点位"]                   
      ],
      minDistance:'',
      minLatitude:'',
      minLongitude:'',
    }
  },
  computed: {
    navbarSliderClass() {
      if (this.activeIndex == 0) {
        return "navbar_slider_0";
      }
      if (this.activeIndex == 1) {
        return "navbar_slider_1";
      }
      if (this.activeIndex == 2) {
        return "navbar_slider_2";
      }
    }
  },
  methods: {
    tabClick(e) {
      this.activeIndex = e.currentTarget.id;
    },
    toUseCoupon() {
      let that = this;
      var distanceArr = [];
      //遍历点位
      that.addressArr.forEach((item,index)=> {
        //获取当前位置的经度和纬度  
        wx.getLocation({
          type:'gcj02',
          success:function(res) {                    
            //调用函数，测量两个位置之间的距离
            //let distance = that.getDistance(22.53327, 113.953768, item[1], item[0]);
            let distance = that.getDistance(res.latitude, res.longitude, item[1], item[0]);
            distanceArr.push(distance);
            if(index === that.addressArr.length - 1) {
              //获取数组中最小的一个值，即为距离当前位置最近的点位的信息           
              let minDistance = Math.min(...distanceArr);
              //获取最小值在数组中的位置 最近的距离
              let i = distanceArr.indexOf(minDistance.toString());    
              //最近的位置的信息
              let addressDetails = JSON.parse(JSON.stringify(that.addressArr[i]));
              let minAddressName = addressDetails[2];
              let minLatitude = addressDetails[1];
              let minLongitude = addressDetails[0];   
              wx.navigateTo({url:`../useCoupon2/main?minDistance=${minDistance}&minAddressName=${minAddressName}&minLatitude=${minLatitude}&minLongitude=${minLongitude}`})           
              //查看附近有没点位，跳转到对应的页面
              // if(minDistance > 50) {
              //   wx.navigateTo({url:`../useCoupon2/main?minDistance=${minDistance}&minAddressName=${minAddressName}&minLatitude=${minLatitude}&minLongitude=${minLongitude}`})
              // } else {
              //   wx.navigateTo({url:`../useCoupon/main?minAddressName=${minAddressName}`})
              // }
            }                  
          }        
        })                 
      }) 
    },
    //测量两个位置的距离
    getDistance: function (lat1, lng1, lat2, lng2) {
      lat1 = lat1 || 0;
      lng1 = lng1 || 0;
      lat2 = lat2 || 0;
      lng2 = lng2 || 0;
      let rad1 = lat1 * Math.PI / 180.0;
      let rad2 = lat2 * Math.PI / 180.0;
      let a = rad1 - rad2;
      let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      let r = 6378137;
      return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0)
    },

    //一次只能请求五个位置
    // getDistance:function(lat,lng) {       
    //   qqmapsdk.calculateDistance({
    //     to:[{
    //       latitude: lat,
    //       longitude: lng
    //     }],
    //     success:function(res) {
    //       //console.log(res.result.elements[0].distance);
    //       //return res.result.elements[0].distance;
    //     }
    //   })
    // },
  }
}
</script>

<style scoped lang="stylus">
.coupon 
  font-size 30rpx 
  .coupon_message 
    height 250rpx
    border-radius 25rpx
    background #c79e4d
    .coupon_money
      width 250rpx
      text-align center
      float left
      margin-top 50rpx
      span 
        display block    
    .coupon_activity 
      width 450rpx
      float left
      margin-top 40rpx
      .time
        font-size 24rpx
        margin-top 20rpx
    input  
      width 180rpx
      height 60rpx
      line-height 80rpx
      background #4c85d3
      border-radius 10rpx
      color #ffffff
      line-height 60rpx
      font-size 24rpx
      clear both
      float right
      margin 10rpx 50rpx 0 0
  .navbar 
    display -webkit-box
    display -webkit-flex
    display flex
    position fixed
    z-index 500
    top 0
    height 50rpx
    width 100%
    .navbar_item 
      position relative
      display block
      -webkit-box-flex 1
      -webkit-flex 1
      flex 1
      padding 13rpx 0
      text-align center
      color #000
    .navbar_item_on 
      color #c79e4d
    .navbar_slider 
      position absolute
      content " "
      left 0
      bottom 0
      width 92rpx
      height 4rpx
      background-color #c79e4d
    .navbar_slider_0 
      left 80rpx
      top 60rpx
    .navbar_slider_1 
      left 330rpx
      top 60rpx
    .navbar_slider_2 
      left 580rpx
      top 60rpx
  .navbar_content
    position relative
    top 100rpx
    box-sizing border-box
    padding 0 20rpx
</style>
